<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* .b{
            color: red;
        } */

        /* div[class="b"] {
            color: red;
        } */

        /* div[id="a"] {
            color: red;
        } */

        /* 属性选择器 */
        div[qq="w"] {
            color: blue;
        }

        /* div.b{
            color: yellow;
        } */

       

    </style>
</head>
<body>

    <div id="a" class="b" qq="w">div</div>

    <script>

        // property  属性   

        // attributes 属性   拿到标签上面的所有的属性

        // 方法
        //   getAttribute()   获取指定的属性值
        //   setAttribute(属性名，属性值)   设置属性
        //   removeAttribute()  移除


        //   所有的属性都可以通过 getAttribute()

        //   自有属性  有简写   oDiv.id

        //   自定义属性   没有简写   只能  getAttribute()

        var oDiv = document.querySelector('div') ;

        console.log(oDiv.attributes) ;

        console.log(oDiv.attributes.id) ;  // id=a


        console.log(oDiv.getAttribute('id')) ;   // a

        console.log(oDiv.getAttribute('class')) ;  // b

        console.log(oDiv.getAttribute('qq')) ;  // w

        oDiv.setAttribute('www' , 'w') ;

        // oDiv.removeAttribute('class') ;



        console.log(oDiv.id) ;
        console.log(oDiv.qq) ;  // undefined

    </script>
    
</body>
</html>